<template>
  <div class="error-page">
    <div>
      <h3 style="margin-left: 10px; margin-bottom: 15px">新增产品</h3>
    </div>
    <div>
      <el-divider></el-divider>
    </div>
    <div>
      <div class="tableTitle"><span class="midText">基础信息</span></div>
    </div>
    <div style="margin-top: 25px; margin-bottom: 25px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="formRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="产品编号" prop="productId">
                <el-input
                  v-model="ruleForm.productId"
                  style="width: 400px"
                  disabled
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="产品名称" prop="productName">
                <el-input
                  v-model="ruleForm.productName"
                  style="width: 400px"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="规格型号" prop="specification">
                <el-input
                  v-model="ruleForm.specification"
                  style="width: 400px"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="单位" prop="units">
                <el-select
                  v-model="ruleForm.units"
                  placeholder="请选择单位"
                  style="width: 400px"
                >
                  <el-option
                    v-for="(a, index) in bindUnit"
                    :key="index"
                    :label="a.text"
                    :value="a.text"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="产品类型" prop="productType">
                <el-select
                  v-model="ruleForm.productType"
                  placeholder="请选择产品类型"
                  style="width: 400px"
                >
                  <el-option
                    v-for="(a, index) in bindType"
                    :key="index"
                    :label="a.text"
                    :value="a.text"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="产品属性" prop="productProperty">
                <el-select
                  v-model="ruleForm.productProperty"
                  placeholder="请选择产品属性"
                  style="width: 400px"
                >
                  <el-option
                    v-for="(a, index) in bindProperty"
                    :key="index"
                    :label="a.text"
                    :value="a.text"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="产品分类" prop="productClassId">
                <el-cascader
                  v-model="ruleForm.productClassId"
                  :options="options"
                  :props="props1"
                  clearable
                />
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="状态" prop="state">
                <el-radio-group v-model="ruleForm.state">
                  <el-radio
                    v-for="(a, index) in bindState"
                    :key="index"
                    :label="a.value"
                    >{{ a.text }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="有效期限" prop="periodofValidity">
                <el-input
                  v-model="ruleForm.periodofValidity"
                  style="width: 150px"
                ></el-input>
                <el-select
                  v-model="ruleForm.date"
                  placeholder="请选择有效期单位"
                  style="width: 150px"
                >
                  <el-option
                    v-for="(a, index) in bindDate"
                    :key="index"
                    :label="a.text"
                    :value="a.text"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="报警天数" prop="numberDay">
                提前<el-input
                  v-model="ruleForm.numberDay"
                  style="width: 250px"
                ></el-input
                >天报警
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="库存上限" prop="inventoryCeiling">
                <el-input
                  v-model="ruleForm.inventoryCeiling"
                  style="width: 400px"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="库存下限" prop="stockFloor">
                <el-input
                  v-model="ruleForm.stockFloor"
                  style="width: 400px"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="采购价格" prop="purchasePrice">
                <el-input
                  v-model="ruleForm.purchasePrice"
                  style="width: 400px"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="销售价格" prop="salePrice">
                <el-input
                  v-model="ruleForm.salePrice"
                  style="width: 400px"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>

        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="ruleForm.remark"
                  type="textarea"
                  rows="4"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-form-item>
          <div>
            <div class="tableTitle"><span class="midText">图片</span></div>
          </div>
          <div style="margin-top: 25px; margin-bottom: 25px">
            <div style="margin-left: 35px">
              <el-button
                size="small"
                type="primary"
                @click="UplodsAsyncss"
                style="margin-bottom: 15px"
                >点击上传</el-button
              >
              <el-upload
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-change="addfile"
                :auto-upload="false"
                multiple
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
          <div>
            <div class="tableTitle"><span class="midText">附件</span></div>
            <el-button
              size="small"
              type="primary"
              @click="UplodsAsyncss2"
              style="margin-bottom: 15px"
              >附件上传</el-button
            >
          </div>
          <div>
            <div
              style="text-align: center; margin-top: 25px; margin-bottom: 25px"
            >
              <el-upload
                class="upload-demo"
                drag
                :on-change="addfile2"
                :auto-upload="false"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </div>
          </div>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  <script>
import { useRouter } from "vue-router";
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { ProductClassShow, AddProduct } from "../../api/product";
import { UplodsAsync } from "../../api/Material";
import { GetDictionary } from "../../api/Dictionaries";
export default {
  setup() {
    const router = useRouter();
    const options = ref([]);
    const bindUnit = ref({});
    const bindType = ref({});
    const bindProperty = ref({});
    const bindDate = ref({});
    const bindState = ref({});
    const formRef = ref(null);
    const ruleForm = reactive({
      productId: "",
      productName: "",
      specification: null,
      units: "",
      productType: "",
      productProperty: "",
      productClassId: null,
      state: null,
      periodofValidity: null,
      date: "",
      numberDay: null,
      inventoryCeiling: null,
      stockFloor: null,
      purchasePrice: null,
      salePrice: null,
      remark: "",
      imgChildren: [],
      accessoryChildren: [],
    });

    const selectData = () => {
      ProductClassShow().then((res) => {
        options.value = res.result;
      });
      GetDictionary("单位").then((res) => {
        bindUnit.value = res.result;
      });
      GetDictionary("产品类型").then((res) => {
        bindType.value = res.result;
      });
      GetDictionary("产品属性").then((res) => {
        bindProperty.value = res.result;
      });
      GetDictionary("有效期单位").then((res) => {
        bindDate.value = res.result;
      });
      GetDictionary("状态").then((res) => {
        bindState.value = res.result;
      });
    };
    selectData();
    const rules = {
      productName: [
        { required: true, message: "请输入产品名称", trigger: "blur" },
      ],
      specification: [
        { required: true, message: "请输入规格型号", trigger: "blur" },
      ],
      units: [{ required: true, message: "请输入单位", trigger: "blur" }],
      productType: [
        { required: true, message: "请输入产品类型", trigger: "blur" },
      ],
      productProperty: [
        { required: true, message: "请输入产品属性", trigger: "blur" },
      ],

      productClassId: [
        { required: true, message: "请选择产品分类", trigger: "change" },
      ],
      periodofValidity: [
        { required: true, message: "请输入有效期", trigger: "blur" },
      ],
      date: [
        { required: true, message: "请选择有效期单位", trigger: "change" },
      ],
      numberDay: [
        { required: true, message: "请输入报警天数", trigger: "blur" },
      ],
      inventoryCeiling: [
        { required: true, message: "请输入库存上限", trigger: "blur" },
      ],
      stockFloor: [
        { required: true, message: "请输入库存下限", trigger: "blur" },
      ],
      purchasePrice: [
        { required: true, message: "请输入采购价格", trigger: "blur" },
      ],
      salePrice: [
        { required: true, message: "请输入销售价格", trigger: "blur" },
      ],
      remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
    };
    const props1 = {
      checkStrictly: true,
    };
    // 提交
    const submitForm = () => {
      // 表单校验
      formRef.value.validate((valid) => {
        if (valid) {
          ruleForm.productClassId = parseInt(
            ruleForm.productClassId[length + 1]
          );
          console.log(ruleForm);
          AddProduct(ruleForm).then((res) => {
            if (res.success == true) {
              ElMessage.success("添加成功！");
              router.push({ path: "/ProductList" });
            } else {
              ElMessage.error("添加失败");
            }
          });
        } else {
          return false;
        }
      });
    };
    const imgdata = reactive([]);
    const UplodsAsyncss = () => {
      let formData = new FormData();
      // 将上传的文件放到数据对象中
      imgdata.forEach((x) => {
        console.log(x.files);
        formData.append("files", x.files);
      });
      console.log("提交前", formData.getAll("files"));
      UplodsAsync(formData).then((res) => {
        if (res.success == true) {
          ElMessage.success("上传成功");
        } else {
          ElMessage.error("上传失败");
        }
        console.log(res);
      });
    };
    const imgdata2 = reactive([]);
    const UplodsAsyncss2 = () => {
      let formData = new FormData();
      // 将上传的文件放到数据对象中
      imgdata2.forEach((x) => {
        console.log(x.files);
        formData.append("files", x.files);
      });
      console.log("提交前", formData.getAll("files"));
      UplodsAsync(formData).then((res) => {
        if (res.success == true) {
          ElMessage.success("上传成功");
        } else {
          ElMessage.error("上传失败");
        }
        console.log(res);
      });
    };
    const addfile = (file) => {
      console.log(file.raw);
      imgdata.push({
        files: file.raw,
      });
      ruleForm.imgChildren.push({
        Filename: "产品图片",
        Filepath: file.name,
      });
      console.log(ruleForm);
    };
    const addfile2 = (file) => {
      console.log(file.raw);
      imgdata2.push({
        files: file.raw,
      });
      ruleForm.accessoryChildren.push({
        Filename: "产品附件",
        Filepath: file.name,
      });
      console.log(ruleForm);
    };

    // 重置
    const resetForm = () => {
      formRef.value.resetFields();
    };

    return {
      rules,
      formRef,
      ruleForm,
      options,
      props1,
      bindUnit,
      bindType,
      bindProperty,
      bindDate,
      bindState,
      imgdata,
      imgdata2,
      addfile2,
      addfile,
      UplodsAsyncss,
      submitForm,
      resetForm,
      UplodsAsyncss2,
    };
  },
};
</script>
  <style>
.tableTitle {
  position: relative;
  margin: 0 auto;
  height: 1px;
  background-color: #d4d4d4;
  text-align: center;
  font-size: 16px;
  color: rgba(101, 101, 101, 1);
}
.midText {
  position: absolute;
  left: 50%;
  background-color: #ffffff;
  padding: 0 15px;
  transform: translateX(-50%) translateY(-50%);
}
</style> 

